import { Component } from '@angular/core';
import {User, UserStore} from "../service/user-store";
import {ComponentStore} from "@ngrx/component-store";
import {Observable} from "rxjs";
import {selectQueryParams} from "../store/selectors/router.selectors";
import {select, Store} from "@ngrx/store";

@Component({
  selector: 'app-user-list2',
  templateUrl: './user-list2.component.html',
  styleUrls: ['./user-list2.component.less']
})
export class UserList2Component {
  routerParams: object = {};
  constructor(public userStore: UserStore, private store: Store) {
    store.pipe(select(selectQueryParams)).subscribe((routerState) => {
      // 处理选择的 router state
      console.log('list routerState',routerState)
      this.routerParams = routerState
    });
  }

  readonly loading$: Observable<boolean> = this.userStore.select(store => store.loading);
  readonly users$: Observable<User[]> = this.userStore.select(store => store.users);

  readonly fetchUsers = (): void => {
    this.userStore.fetchUsers();
  }

  getUsers() {
    this.fetchUsers()
  }
}
